<template>
  <div class="content-container">
    <el-breadcrumb separator-class="el-icon-arrow-right" class="pd-total">
      <el-breadcrumb-item :to="{ path: '/project' }">项目管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/project' }">正式项目</el-breadcrumb-item>
      <el-breadcrumb-item :to="{
        path: '/progressManager',
        query: {
          projectId: $route.query.projectId,
          versionId: $route.query.versionId,
          projectName: $route.query.projectName,
        },
      }">进度管理</el-breadcrumb-item>
      <el-breadcrumb-item>{{ projectName }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card tab-div">
      <el-row>
        <el-col>
          <div class="click-btn">
            <el-button style="border: none" @click="downloadTemplate" size="small">下载导入模板</el-button>
            <el-button type="primary" :disabled="!authority.canPointExcelImport" size="small" :class="
              authority.canPointExcelImport
                ? 'green-btn common-btn-wd export-btn'
                : ''
            " @click="importFunctionList">导入功能列表</el-button>
            <el-button :disabled="!authority.canOperatePoint" type="primary" size="small" :class="
              authority.canPointExcelImport ? 'blue-btn common-btn-wd' : ''
            " @click="addNewFunction">新增功能点</el-button>
            <el-button @click="exportFunctionList" size="small">导出功能列表</el-button>
          </div>
        </el-col>
      </el-row>
      <functionpointTable ref="pointTable" :authority="authority" />
    </el-card>
    <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center :show-close="false"
      :close-on-click-modal="false">
      <el-checkbox :indeterminate="checkList.isIndeterminate" v-model="checkList.checkAll"
        @change="handleCheckAllChange">全选</el-checkbox>
      <div style="margin: 15px 0"></div>
      <el-checkbox-group v-model="checkList.checkedCities" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="city in checkList.progressCities" :label="city.id" :key="city.id">{{ city.portName }}
        </el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="citiesdialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="importFunction">确 定</el-button>
        <el-upload ref="fileRefs" class="submit-summary" :action="action" :headers="headers" :accept="accept" :limit="1"
          :file-list="fileList" :on-change="hasChange" :on-success="handleSuccess" :show-file-list="false"></el-upload>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import BaseTable from "@/components/table/baseTable";
import functionpointTable from "./component/functionpointTable";
import { documentList } from "@/service/Api.js";
import { getVerTaskPortList, getVersionAuthority } from "@/service/progressApi";
export default {
  name: "progressManagerDetail",
  components: { BaseTable, functionpointTable },
  data() {
    return {
      projectName: this.$route.query.projectName,
      versionId: this.$route.query.versionId,
      projectId: this.$route.query.projectId,
      fileList: [],
      tableSetting: {
        defaulteParams: {
          projectNameKeyWord: "",
          principalNameKeyWord: "",
          level: "",
          plateId: "",
          status: "",
        },
        tableApiFn: documentList,
        options: [
          { prop: "index", label: "序号" },
          { prop: "firstModule", label: "一级模块", width: "200" },
          { prop: "secondModule", label: "二级模块" },
          { prop: "functionDesc", label: "功能描述" },
          { prop: "type", label: "类型" },
          { prop: "ui", label: "界面" },
          { prop: "JAVA", label: "JAVA" },
          { prop: "interfaceTest", label: "接口联调" },
        ],
        btns: [
          { text: "修改", size: "mini", handleName: "editProgress" },
          {
            text: "删除",
            size: "mini",
            handleName: "deleteProgress",
            type: "danger",
          },
        ],
      },
      action: ``,
      token: "",
      // headers: {
      //   Authorization: this.token,
      // },
      accept: ".xlsx,.xls",
      centerDialogVisible: false,
      list: [],
      checkList: {
        checkAll: false,
        checkedCities: [],
        progressCities: [],
        isIndeterminate: false,
      },
      authority: "", //权限操作
    };
  },
  created() {
    let versionId = this.$route.query.versionId;
    getVersionAuthority(this.projectId, versionId).then((res) => {
      this.authority = res.data;
    });
  },
  mounted() {
    this.token = sessionStorage.getItem("token");
    console.log(this.token);
  },
  computed: {
    headers() {
      return {
        ["API-User-Token"]: this.token,
      };
    },
  },
  methods: {
    hasChange(file, fileList) {
      console.log(file);
      console.log(fileList);
    },
    // 下载导入模板
    downloadTemplate() {
      // window.location.href = `${this.$img}/static/template.xlsx`; //测试环境
      window.location.href = `${this.$img}/template.xlsx`; //正式环境
    },
    obtainlist() { },
    // 点击导入功能列表,弹出框显示
    importFunctionList() {
      getVerTaskPortList(this.versionId).then((res) => {
        this.checkList.progressCities = res.data;
        this.centerDialogVisible = true;
        this.checkList = Object.assign({}, this.checkList);
      });
    },
    // 拉起文件选取框
    getDialog() {
      this.$refs["fileRefs"].$refs["upload-inner"].handleClick();
    },
    importFunction() {
      if (this.checkList.checkedCities.length == 0) {
        this.$message.warning("请选择您要导入项目端！");
        return;
      }
      let uid = JSON.parse(sessionStorage.getItem("userInfo")).id;
      let checkIds = this.checkList.checkedCities.join(",");
      this.action = `/api/admin/functionPoint/importFunctionPoint/${checkIds}/${uid}`;
      this.getDialog();
    },
    // 导入成功
    handleSuccess(res, file, fileList) {
      if (res.code == 20001) {
        this.$message.warning("导入文件不符合!");
      } else {
        this.$message.success("导入成功~");
        this.centerDialogVisible = false;
        // 刷新数据
        this.fileList = [];
        this.checkList.checkedCities = [];
        this.checkList = Object.assign({}, this.checkList);
        this.$refs.pointTable.staffing();
      }
    },
    // 新增功能点
    addNewFunction() {
      this.$refs.pointTable.addPoint();
    },
    // 导出功能列表
    exportFunctionList() {
      this.$refs.pointTable.exportFunctionList();
    },
    //全选change
    handleCheckAllChange(val) {
      let list = [];
      this.checkList.progressCities.forEach((item) => {
        list.push(item.id);
      });
      this.checkList.checkedCities = val ? list : [];
      this.checkList.isIndeterminate = false;
    },
    //多选框change
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkList.checkAll =
        checkedCount === this.checkList.progressCities.length;
      this.checkList.isIndeterminate =
        checkedCount > 0 && checkedCount < this.checkList.progressCities.length;
    },
    handleCommon(name, row, id) {
      if (this[name]) {
        this[name](row, id);
      }
    },
  },
};
</script>

<style scoped>
@import "../../../styles/common.css";

.green-btn {
  width: 120px;
  font-size: 14px;
  background-color: #00b98d;
  border-color: #00b98d;
}

.blue-btn {
  background-color: #409eff;
  border-color: #409eff;
}

.click-btn {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}

.common-btn-wd {
  width: 150px;
}

.export-btn {
  margin: 0 9px 0 9px;
}

/* 进度管理  项目列表受影响，无法显示全，注释看看 */
/* .tab-div {
  height: calc(100vh - 158px);
} */
.citiesdialog-footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.submit-summary {
  margin-left: 10px;
}
</style>